<template>
  <view class="record-page">
    <!-- 记录列表容器 -->
    <view class="record-list">
      <!-- 记录列表项 -->
      <view 
        class="record-item" 
        v-for="item in recordTypes" 
        :key="item.type"
        @click="handleItemClick(item)"
      >
        <text class="item-text">{{ item.name }}</text>
        <view class="arrow-icon">
          <uni-icons type="right" size="18" color="#C0C4CC"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 记录类型列表
      recordTypes: [
        { name: '验票记录', type: 'ticket-check-record' },
        { name: '扣币记录', type: 'coin-deduction-record' },
        { name: '扣票记录', type: 'ticket-deduction-record' },
        { name: '存票记录', type: 'ticket-deposit-record' },
        { name: '充值记录', type: 'recharge-record' },
        { name: '售票记录', type: 'ticket-sales-record' },
        { name: '商品售卖记录', type: 'goods-sales-record' },
        { name: '开卡记录', type: 'card-register-record' },
        { name: '远程控制记录', type: 'remote-control-record' }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.orderList')
  	});
  },
  methods: {
    // 处理列表项点击事件
    handleItemClick(item) {
      // 根据不同的记录类型跳转到对应的详情页
      console.log(`点击了${item.name}`);
      // 直接使用item中的type属性进行跳转
      if (item && item.type) {
        uni.navigateTo({ url: `/pages/order/${item.type}` });
      } else {
        console.log('未知记录类型');
      }
    }
  }
};
</script>

<style scoped>
/* 页面容器，设置100%高度 */
.record-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #F5F7FA;
}

/* 记录列表容器 */
.record-list {
  flex: 1;
  padding-top: 10px;
  overflow-y: auto; /* 允许内容滚动 */
}

/* 列表项样式 */
.record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  margin-bottom: 10px;
  background-color: #FFFFFF;
  border-radius: 8px;
  margin-left: 16px;
  margin-right: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

/* 列表项点击反馈 */
.record-item:active {
  background-color: #F5F5F5;
  transform: scale(0.99);
}

.item-text {
  font-size: 16px;
  color: #333333;
}

/* 箭头图标容器 */
.arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>